<template>
    <el-card class="box-card" shadow="never">
        <!-- <template #header>
            <div class="card-header">
                <span>各类活动报名人次统计</span>
                <el-button class="button" @click="init" text>刷新</el-button>
            </div>
        </template> -->
        <div ref="chartRef" id="chartSignedUp" class="chart-container"></div>
    </el-card>
</template>
<script setup>
import * as echarts from 'echarts'
import { ref, onMounted, onUnmounted } from 'vue'
import $axios from '../../../utils/axios'

const chartRef = ref(null)
let chart = null

// 定义初始化echarts图表的方法
const initChart = (chartData) => {
    if (!chartRef.value) {
        console.error('找不到图表容器')
        return
    }

    // 如果已经有图表实例，先销毁它
    if (chart) {
        chart.dispose()
        chart = null
    }

    try {
        // 初始化图表
        chart = echarts.init(chartRef.value)

        // 配置图表
        const options = {
            title: {
                text: '各类活动报名人次统计',
                left: 'center',
                top: 20
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                data: chartData.map(item => item.ActivityType)
            },
            series: [
                {
                    name: '活动类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['50%', '60%'],
                    avoidLabelOverlap: true,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        formatter: '{b}\n{d}%'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 20,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: true
                    },
                    data: chartData.map(item => ({
                        name: item.ActivityType,
                        value: item.NumberOfSignUps
                    }))
                }
            ]
        }

        // 设置图表配置项
        chart.setOption(options)

        // 添加窗口大小改变的监听
        window.addEventListener('resize', handleResize)
    } catch (error) {
        console.error('图表初始化失败:', error)
    }
}

// 处理窗口大小改变
const handleResize = () => {
    if (chart) {
        chart.resize()
    }
}

const init = async () => {
    try {
        // 获取统计数据
        const path = '/count/countSignedUpNum'
        const { data: res } = await $axios.get(path)
        if (res.code === 200 && res.result) {
            console.log('活动报名数据:', res.result)
            initChart(res.result)
        } else {
            console.warn('未获取到活动报名数据')
            initChart([{
                ActivityType: '暂无数据',
                NumberOfSignUps: 100
            }])
        }
    } catch (error) {
        console.error('获取数据失败:', error)
        initChart([{
            ActivityType: '获取失败',
            NumberOfSignUps: 100
        }])
    }
}

onMounted(() => {
    init()
})

onUnmounted(() => {
    // 移除窗口大小改变的监听
    window.removeEventListener('resize', handleResize)
    // 销毁图表实例
    if (chart) {
        chart.dispose()
        chart = null
    }
})

</script>

<style scoped>
.box-card {
    width: 100%;
    height: 100%;
    /* margin-top: 12px; */
    /* border-radius: 12px; */
}

.chart-container {
    width: 100%;
    height: 400px;
    min-height: 300px;
    /* margin-left: 30px; */
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
}

.el-table {
    width: 50%;
}


.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}


#chart {
    margin-top: 12px;
    border-radius: 12px;
}
</style>

<style>
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>